<template>
  <div class="contain">
    <h1>数据库列表</h1>
    <el-row style="margin-bottom: 10px;">
      <el-button type="success" @click="addDialog = true">
        <i class="el-icon-circle-plus" style="margin-right: 5px"></i>创建数据库
      </el-button>
      <el-button @click="refresh">刷新</el-button>
    </el-row>
    <el-row>
      <el-empty v-if="databases == null || databases.length === 0">
      </el-empty>
      <el-card @click.native="cardClick(database)" v-else v-for="(database, index) in databases" :key="index"
               style="margin-bottom: 10px;border-radius: 25px;cursor: pointer;">
        <el-row>
          <el-col :span="23">
            <span style="font-size: 1.5em;font-weight: bolder;">{{ database.name }}</span>
          </el-col>
          <el-col :span="1">
            <el-dropdown @command="showDropDialog" placement="bottom">
              <span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="database.name">
                  <el-button type="text"><i class="el-icon-delete-solid"></i></el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <span class="flex">
          <span>
            <el-statistic :value="database.collections">
              <template slot="title">
                <span class="collection">集合数:</span>
              </template>
            </el-statistic>
          </span>
          <span>
            <el-statistic :value="database.views">
              <template slot="title">
                <span class="collection">视图数量:</span>
              </template>
            </el-statistic>
          </span>
          <span>
            <el-statistic :value="database.objects">
              <template slot="title">
                <span class="collection">集合中对象的数量:</span>
              </template>
            </el-statistic>
          </span>
          <span>
            <el-statistic :value="database.indexes">
              <template slot="title">
                <span class="collection">索引总数:</span>
              </template>
            </el-statistic>
          </span>
          <span>
            <el-statistic :value="database.indexSize / 1000" :precision="2">
              <template slot="title">
                <span class="collection">所有索引大小:</span>
              </template>
              <template slot="suffix">kB</template>
            </el-statistic>
          </span>
          <span>
            <el-statistic :value="database.storageSize / 1000" :precision="2">
              <template slot="title">
                <span class="collection">所有集合大小:</span>
              </template>
              <template slot="suffix">kB</template>
            </el-statistic>
          </span>
          <span>
            <el-statistic :value="database.dataSize / 1000" :precision="2">
              <template slot="title">
                <span class="collection">未压缩数据的总大小:</span>
              </template>
              <template slot="suffix">kB</template>
            </el-statistic>
          </span>
          <span>
            <el-statistic :value="database.avgObjSize / 1000" :precision="2">
              <template slot="title">
                <span class="collection">每个文档的平均大小:</span>
              </template>
              <template slot="suffix">kB</template>
            </el-statistic>
          </span>
          <span>
            <el-statistic :value="database.totalSize / 1000" :precision="2">
              <template slot="title">
                <span class="collection">所有集合中的文档和索引分配的大小:</span>
              </template>
              <template slot="suffix">kB</template>
            </el-statistic>
          </span>
        </span>
      </el-card>
    </el-row>

    <!-- 添加collection和database对话框 -->
    <el-dialog :visible.sync="addDialog" width="30%" :close-on-click-modal="false"
               @closed="closeAddDialog" @opened="openAddDialog">
      <div slot="title" style="font-size: 1.3em">
        <span>创建数据库</span>
      </div>
      <el-form :model="addForm" label-position="top" size="small">
        <el-form-item label="数据库名" label-width="50px">
          <el-input v-model="addForm.databaseName" :autofocus="true" ref="addDatabaseNameInput"></el-input>
        </el-form-item>
        <el-form-item label="集合名" label-width="50px">
          <el-input v-model="addForm.collectionName" :autofocus="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取消</el-button>
          <el-button type="primary" @click="addConfirm" :disabled="addButtonDisabled">创建数据库</el-button>
        </span>
    </el-dialog>

    <!-- 删除collection和database对话框 -->
    <el-dialog :visible.sync="dropDialog" width="30%" :close-on-click-modal="false"
               @closed="closeDropDialog" @opened="openDropDialog">
      <div slot="title" style="font-size: 1.3em">
        <i class="el-icon-error" style="color: red; margin-right: 5px;"></i>删除 "{{ dropLabel }}" 数据库
      </div>
      <el-form :model="dropForm" label-position="top" size="small">
        <el-form-item label-width="50px">
          <template slot="label">
            <span style="font-weight: bold">请输入 "{{ dropLabel }}" 进行确认删除数据库</span>
          </template>
          <el-input v-model="dropForm.dropString" :autofocus="true" ref="dropInput"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dropDialog = false">取消</el-button>
          <el-button type="danger" @click="dropConfirm" :disabled="dropButtonDisabled">删除数据库</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import {createDatabaseAndCollection, dropDatabase, getDatabasesInfoList} from "@/api/databases";

export default {
  name: "Databases",
  data() {
    return {
      databaseName: '',
      databases: [],
      addDialog: false,
      addButtonDisabled: true,
      addForm: {
        databaseName: '',
        collectionName: ''
      },
      dropDialog: false,
      dropButtonDisabled: true,
      dropLabel: '',
      dropForm: {
        dropString: '',
      }
    }
  },
  watch: {
    addForm: {
      handler() {
        this.addButtonDisabled = this.addForm.collectionName === ''
      },
      deep: true
    },
    dropForm: {
      handler() {
        this.dropButtonDisabled = this.dropForm.dropString !== this.dropLabel;
      },
      deep: true
    }
  },
  created() {
    this.getDatabasesInfoList()
  },
  methods: {
    getDatabasesInfoList() {
      getDatabasesInfoList().then(res => {
        this.databases = res.data
      })
    },
    refresh() {
      const loading = this.$loading({
        lock: true,
        text: '刷新中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.getDatabasesInfoList()
      }, 1000);
    },
    openAddDialog() {
      this.$refs.addDatabaseNameInput.focus();
    },
    closeAddDialog() {
      this.addForm = {
        databaseName: '',
        collectionName: ''
      }
      this.addDialog = false
      this.addButtonDisabled = true
    },
    addConfirm() {
      createDatabaseAndCollection(this.addForm.databaseName, this.addForm.collectionName).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '创建中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.addDialog = false
          this.$message.success("成功创建数据库！")
          this.getDatabasesInfoList()
          this.$emit("refreshTreeList")
        }, 1000);
      }).catch(() => {
        this.$message.error("创建数据库失败！")
      })
    },
    showDropDialog(databaseName) {
      this.dropDialog = true
      this.dropLabel = databaseName
    },
    openDropDialog() {
      this.$refs.dropInput.focus();
    },
    closeDropDialog() {
      this.dropForm = {
        dropString: '',
      }
      this.dropDialog = false
      this.dropButtonDisabled = true
    },
    dropConfirm() {
      // database
      dropDatabase(this.dropLabel).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '删除中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          setTimeout(() => {
            loading.close();
            this.dropDialog = false
            this.$message.success("成功删除数据库！")
            this.getDatabasesInfoList()
            this.$emit("refreshTreeList")
          }, 1000);
      }).catch(() => {
        this.$message.error("删除数据库失败！")
      })
    },
    cardClick(database) {
      this.$store.dispatch('SetDatabaseName', database.name)
      this.$router.push('/collections')
    },
  }
}
</script>

<style scoped>
.contain {
  padding: 20px;
}

.flex {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collection {
  font-size: 15px;
  font-weight: bolder;
}
</style>